<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H2O theme for Jekyll - 谦谦君子</title>
    <meta name="author"  content="李崇兵">
    <meta name="description" content="H2O theme for Jekyll">
    <meta name="keywords"  content="jekyll, 前端开发, 设计">
    <!-- Open Graph -->
    <meta property="og:title" content="H2O theme for Jekyll - 谦谦君子">
    <meta property="og:type" content="website">
    <meta property="og:url" content="/2017/04/18/new-theme-h2o.html">
    <meta property="og:description" content="昵称谦谦君子，后端开发者/伪极客/灵魂摄影师，热爱技术&设计。很高兴能在这里与你分享我对技术和生活的思考。">
    <meta property="og:site_name" content="谦谦君子">
    <link rel="stylesheet" href="//cdn.staticfile.org/normalize/6.0.0/normalize.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_roc50gemkxpw4s4i.css">
    <link rel="stylesheet" href="/assets/css/github-markdown.css">
    <link rel="stylesheet" href="/assets/css/prism.css">
    <link rel="stylesheet" href="/assets/css/share.min.css">
    <link rel="stylesheet" href="/assets/css/app.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
	
	<!--
Author: Ray-Eldath
refer to:
 - http://docs.mathjax.org/en/latest/options/index.html
-->

	<script type="text/javascript" async src="https://cdn.bootcss.com/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
	
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
		jax: ["input/TeX", "output/HTML-CSS"],
		tex2jax: {
			inlineMath: [ ["$", "$"] ],
			displayMath: [ ["$$", "$$"] ],
			skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
		},
		"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] }
      });
    </script>

	
    <!--
Author: Ray-Eldath
-->
<style>
    .markdown-body .anchor{
        float: left;
        margin-top: -8px;
        margin-left: -20px;
        padding-right: 4px;
        line-height: 1;
        opacity: 0;
    }
    
    .markdown-body .anchor .anchor-icon{
        font-size: 15px
    }
</style>
<script>
    $(document).ready(function() {
        let nodes = document.querySelector(".markdown-body").querySelectorAll("h1,h2,h3")
        for(let node of nodes) {
            var anchor = document.createElement("a")
            var anchorIcon = document.createElement("i")
            anchorIcon.setAttribute("class", "fa fa-anchor fa-lg anchor-icon")
            anchorIcon.setAttribute("aria-hidden", true)
            anchor.setAttribute("class", "anchor")
            anchor.setAttribute("href", "#" + node.getAttribute("id"))
            
            anchor.onmouseover = function() {
                this.style.opacity = "0.4"
            }
            
            anchor.onmouseout = function() {
                this.style.opacity = "0"
            }
            
            anchor.appendChild(anchorIcon)
            node.appendChild(anchor)
        }
    })
</script>
</head>


<body>
  <!--[if lt IE 10]>
<div class="alert-danger" role="alert">你的浏览器实在太太太旧了，放学别走，升级完浏览器再说！<a target="_blank" class="alert-link" href="http://browsehappy.com">立即升级</a></div>
<![endif]-->
  <input id="nm-switch" type="hidden" value="true"> <header class="g-header">
    <div class="g-logo">
      <a href="/"></a>
    </div>
    <i id="menu-toggle" class="iconfont icon-menu"></i>
    <nav class="g-nav">
        <ul>
            
            <li><a href="/">home</a></li>
            
            <li><a href="/tags.html">tags</a></li>
            
        </ul>
    </nav>
</header>


  <header
    class="g-banner post-header post-pattern-circuitBoard bgcolor-default "
    data-theme="default"
  >
    <div class="post-wrapper">
      <div class="post-tags">
        
          
            <a href="/tags.html#jekyll" class="post-tag">jekyll</a>
          
            <a href="/tags.html#%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91" class="post-tag">前端开发</a>
          
            <a href="/tags.html#%E8%AE%BE%E8%AE%A1" class="post-tag">设计</a>
          
        
      </div>
      <h1>H2O theme for Jekyll</h1>
      <div class="post-meta">
        <span class="post-meta-item"><i class="iconfont icon-author"></i>李崇兵</span>
        <time class="post-meta-item" datetime="17-04-18"><i class="iconfont icon-date"></i>18 Apr 2017</time>
      </div>
    </div>
    
    <div class="filter"></div>
      <div class="post-cover" style="background: url('http://on2171g4d.bkt.clouddn.com/jekyll-theme-h2o-postcover.jpg') center no-repeat; background-size: cover;"></div>
    
  </header>

  <div class="post-content visible">
    
    <h2 class="post-subtitle">或许是最漂亮的Jekyll主题</h2>
    

    <article class="markdown-body">
      <p>正如我在<a href="http://weibo.com/1374146504/profile?topnav=1&amp;wvr=6">微博</a>上所说的，使用<a href="http://jekyll.com.cn/">Jekyll</a>半年以来一直没有令我满意的主题模板，所以开始计划自己写一套好看又好用的主题模板。设计之初就明确了极简主义，风格采用扁平化了，通过卡片式设计来进行区块分明的布局，参考了Medium的ui样式和知乎专栏的视觉风格。</p>

<h2 id="h2o">H2O</h2>

<p><a href="https://github.com/kaeyleo/jekyll-theme-H2O">源码及使用文档 →</a></p>

<p><img src="http://on2171g4d.bkt.clouddn.com/jekyll-theme-h2o-realhome.jpg" alt="" /></p>

<p>新主题名叫”H2O”，基于Jekyll 3.0.x（使用<code class="highlighter-rouge">gem update jekyll</code>升级Jekyll），Markdown的代码高亮不再支持pygments转而使用rouge，咱已经默认配置了 <code class="highlighter-rouge">highlighter: rouge</code> 。用到的技术栈也很简单：引入jQuery类库，使用Sass编写样式，使用Gulp来编译Sass、合并压缩css、js，开源在<a href="https://github.com/kaeyleo/jekyll-theme-H2O">Github</a>上，稍作配置即可用于你的Jekyll博客上。</p>

<p><img src="http://on2171g4d.bkt.clouddn.com/jekyll-theme-h2o-sketchdesign.png" alt="Design with Sketch" /></p>

<p>使用Sketch完成H2O主题的原型设计</p>

<p><img src="http://on2171g4d.bkt.clouddn.com/jekyll-theme-vs.jpg" alt="My Jekyll themes" /></p>

<p>比之前漂亮不少吧，下面聊聊H2O的新特性。</p>

<h2 id="新特性">新特性</h2>

<h3 id="主题配色">主题配色</h3>

<p>支持两种主题配色——蓝色和粉色。</p>

<p><img src="https://github.com/kaeyleo/jekyll-theme-H2O/blob/master/screenshot/jekyll-theme-h2o-themecolor.jpg?raw=true" alt="" /></p>

<h3 id="侧边栏">侧边栏</h3>

<p>相比自己上一个版本的博客主题，首页增加了侧边栏，方便展示博主的个人信息和文章标签。</p>

<h3 id="社交图标">社交图标</h3>

<p>使用阿里的图标管理平台<a href="http://iconfont.cn/">Iconfont</a>整理了一套<strike>墙内外</strike>常用的社交图标，包括微博、知乎、掘金、简书、Github等十多个网站，鼠标悬停会显示该站的主题色。</p>

<p><img src="http://on2171g4d.bkt.clouddn.com/jekyll-theme-h2o-snstext.jpg" alt="social iconfont" /></p>

<h3 id="前后文导航">前后文导航</h3>

<p><img src="http://on2171g4d.bkt.clouddn.com/jekyll-theme-h2o-nextpostnav.png" alt="Next post navigator" /></p>

<h3 id="自定义文章封面">自定义文章封面</h3>

<p>在Markdown的<a href="http://jekyll.com.cn/docs/frontmatter/">文章头信息</a>里添加cover参数来配置文章的封面图片，如果没有配置封面，则默认【主题色+底纹】的组合作为文章封面。值得一提的是，H2O有两种（粉、蓝）主题色和六种底纹（电路板、食物、云海、钻石等等）供你选择。</p>

<h3 id="头图个性化底纹">头图个性化底纹</h3>

<p>在没有图片的情况下单纯显示颜色会不会太无趣了点？于是想到了加入底纹元素，底纹素材是SVG格式的（保存在css样式里），加载比图片快很多。</p>

<p><img src="http://on2171g4d.bkt.clouddn.com/jekyll-theme-h2o-headerpatterns.jpg" alt="" /></p>

<h3 id="代码高亮">代码高亮</h3>

<p>模板引入了<a href="http://prismjs.com">Prism.js</a>，一款轻量、可扩展的代码语法高亮库。</p>

<p>很多知名网站如<a href="https://developer.mozilla.org/">MDN</a>、<a href="https://css-tricks.com/">css-tricks</a>也在用它，JavaScript 之父 <a href="https://brendaneich.com/">Brendan Eich</a> 也在个人博客上使用。</p>

<p><img src="http://on2171g4d.bkt.clouddn.com/jekyll-theme-h2o-highlight.png" alt="代码高亮" /></p>

<p>遵循 <a href="https://www.w3.org/TR/html5/grouping-content.html#the-pre-element">HTML5</a> 标准，Prism 使用语义化的 <code class="highlighter-rouge">&lt;pre&gt;</code> 元素和 <code class="highlighter-rouge">&lt;code&gt;</code> 元素来标记代码区块：</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;pre&gt;&lt;code class="language-css"&gt;p { color: red }&lt;/code&gt;&lt;/pre&gt;
</code></pre></div></div>

<p>在Markdown中你可以这样写：</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code> ```css
	p { color: red }
</code></pre></div></div>
<p>```</p>

<p>支持语言：</p>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Sass</li>
  <li>JavaScript</li>
  <li>CoffeeScript</li>
  <li>Java</li>
  <li>C-like</li>
  <li>Swift</li>
  <li>PHP</li>
  <li>Go</li>
  <li>Python</li>
</ul>

<h3 id="第三方评论">第三方评论</h3>

<p>由于多说关闭，又对国内其他第三方评论插件无感，所以将<a href="https://disqus.com/">Disqus</a>列为首选（目前模板也只提供了这个），请自备梯子。</p>

<h3 id="移动端优化">移动端优化</h3>

<p>响应式设计，对手机和平板等移动设备做了优化。</p>

<p><img src="http://on2171g4d.bkt.clouddn.com/jekyll-theme-h2o-realm.png" alt="" /></p>

<h3 id="关于阅读体验">关于阅读体验</h3>

<p>我认为在内容质量相同的情况下，出色的沉浸式阅读体验是博客的核心。</p>

<p>H2O在这方面还有很多需要完善的地方，比如：<strike>代码高亮</strike>、夜间模式、查看大图…</p>

<h3 id="其他特性">其他特性：</h3>

<ul>
  <li>网页标题SEO优化</li>
  <li>标签索引，点击标签跳转到标签目录，即可查看对应的全部文章</li>
  <li>漂亮</li>
  <li>好看</li>
  <li>美</li>
</ul>

<h2 id="最后">最后</h2>

<p>本想趁这次机会将整站https化的，但折腾了半天发现弹性web托管并不支持，所以暂时搁置https的想法。另外，博客统计工具一直使用的是<a href="https://tongji.baidu.com">百度统计</a>，这次新增了Google Analytics。</p>

<p>这次从0到1，独自设计、开发再到发布大约用了一周时间，也算完成一个小小的开源项目了，后续也将持续完善和更新，欢迎<a href="https://github.com/kaeyleo/jekyll-theme-H2O">Star</a>。</p>

    </article>

    
    <div class="social-share-wrapper">
      <div class="social-share"></div>
    </div>
    
  </div>

  <section class="author-detail">
    <section class="post-footer-item author-card">
      <div class="avatar">
        <img src="/assets/img/WechatIMG107.png" alt="">
      </div>
      <div class="author-name" rel="author">李崇兵</div>
      <div class="bio">
        <p>后端Java开发者，热爱技术&设计，简单乐观爱创造</p>
      </div>
      
      <ul class="sns-links">
        
        <li>
          <a href="//www.jianshu.com/u/09f8cffeb325" target="_blank">
                    <i class="iconfont icon-jianshu"></i>
                </a>
        </li>
        
        <li>
          <a href="//juejin.im/user/5df8ef57518825126f373133" target="_blank">
                    <i class="iconfont icon-juejin"></i>
                </a>
        </li>
        
        <li>
          <a href="//www.zhihu.com/people/lichongbing" target="_blank">
                    <i class="iconfont icon-zhihu"></i>
                </a>
        </li>
        
        <li>
          <a href="//github.com/lichongbing" target="_blank">
                    <i class="iconfont icon-github"></i>
                </a>
        </li>
        
      </ul>
      
    </section>
    <section class="post-footer-item read-next">
      
      <div class="read-next-item">
        <a href="/2017/07/30/mathjax-test.html" class="read-next-link"></a>
        <section>
          <span>MathJax Test</span>
          <p>mathjax in markdown :)</p>
        </section>
        
     </div>
      

      
      <div class="read-next-item">
        <a href="/2017/04/18/hello-jekyll.html" class="read-next-link"></a>
          <section>
            <span>Hello Jekyll</span>
            <p>  Transform your plain text into static websites and blogs.</p>
          </section>
          
          <div class="filter"></div>
          <img src="http://on2171g4d.bkt.clouddn.com/jekyll-banner.png" alt="">
          
      </div>
      
    </section>
    
  </section>

  <footer class="g-footer">
  <section>谦谦君子 ©
  
  
    2017
    -
  
  2020
  </section>
  <section>Powered by <a href="//lichongbing.com">lichongbing</a> | <a href="https://github.com/kaeyleo/jekyll-theme-H2O">Theme H2O</a></section>
</footer>


  <script src="/assets/js/social-share.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
  <script>
    socialShare('.social-share', {
      sites: [
        
          'wechat'
          ,
          
        
          'weibo'
          ,
          
        
          'douban'
          ,
          
        
          'twitter'
          
        
      ],
      wechatQrcodeTitle: "分享到微信朋友圈",
      wechatQrcodeHelper: '<p>扫码后点击右上角</p><p>将本文分享至朋友圈</p>'
    });
  </script>

  
  
  <script>
      var gitalk = new Gitalk({
            clientID: '48e8da41e53d0caa2027',
            clientSecret: '3fc1d83ce36af7af19b9406bb0264e76333d6c8d',
            repo: 'lichongbing.github.io',
            owner: 'lichongbing',
            admin: 'lichongbing',
            id: location.pathname,      // Ensure uniqueness and length less than 50H2O theme for Jekyll
            distractionFreeMode: 'true'  // Facebook-like distraction free mode
          })

          gitalk.render('disqus_thread')
  </script>


  <script src="/assets/js/prism.js"></script>
  <script src="/assets/js/index.min.js"></script>
</body>

</html>
